<!--
 * @Author: sky 11864026+jfcode81@user.noreply.gitee.com
 * @Date: 2025-09-11 14:54:15
 * @LastEditors: sky 11864026+jfcode81@user.noreply.gitee.com
 * @LastEditTime: 2025-09-25 18:17:47
 * @FilePath: \trading-center-pc\pages\market\home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue'
import { marketListApi } from '@/server/marketApi'
import { MarketListQuery } from '~/types/market'

const tableData = reactive({
  list: [],
  total: 0,
})
const listLoading = ref<boolean>(false)
const where = reactive<MarketListQuery>({
  page: 1,
  limit: 12,
})
const getSMarketList = async () => {
  listLoading.value = true
  try {
    let data = await marketListApi(where)
    data.list.forEach((item: any) => {
      //处理图片链接
      if (item.images) {
        item.images = item.images.split(',')
        item.images = item.images.map((url: string) => {
          return url.replace('[', '').replace(']', '').replace('"/', '').replace('"', '')
        })
        console.log('处理后的图片链接:', item.images)
      }
    })
    tableData.list = data.list
    tableData.total = data.total
    listLoading.value = false
  } catch (err) {
    listLoading.value = false
  }
}
getSMarketList()
</script>
<template>
    <div class="seckill_list pt-60px">
        <div class="wrapper_1200">
            <div class="fontColor333 text-50px text-center font-700 alimama">昌欣集市</div>
            <div class="sologan text-center mb-50px mt-20px">服务产区农户，通过平台交易码，快速销售农产品，扫码可以快速进行交易</div>
            <div class="content flex">
                <div v-for="item in tableData.list" :key="item.id" class="item">
                    <div class="relative image-container">
                        <div v-show="item.quantityAvailable===0" class="sellOut">已售罄</div>
                        <el-image fit="cover" class="backImg" :src="item.images?.[0] || 'require(~/assets/images/yhqwushangp.png)'"></el-image>
                    </div>
                    <!-- 二维码遮罩层 - 覆盖整个item -->
                    <div class="qrcode-overlay">
                        <div class="qrcode-content">
                            <el-image :src="item.sellerQrCodeUrl?item.sellerQrCodeUrl:'require(~/assets/images/qrcode_chrome.png)'" class="qrcode-image"></el-image>
                            <div class="qrcode-text text-14px text-#fff mt-10px">扫码交易</div>
                        </div>
                    </div>
                    <div class="tags">
                        <el-tag type="success">{{item.mushroomName}}</el-tag>
                        <!-- <el-tag>菌种{{item.strain}}</el-tag> -->
                        <el-tag type="info">大棚种植</el-tag>
                    </div>
                    <div class="peopleInfo mt-10px">
                        <div class="name mb-5px">{{item.mushroomName}}</div>
                        <div class="line2 text-14px fontColor333 mb-12px lh-19px acea-row h-38px">{{item.description}}</div>
                        <div class="text-12px phone mb-5px"><span class="iconfont icon-shoujishangcheng inline-block"></span>{{item.price}}</div>

                    </div>
                    <div class="text-12px text-#999 pl-12px pr-12px mt-10px mb-20px">
                        <!-- <span>已售{{ item.sales }}斤</span>
                        <span class="fg">|</span> -->
                        <span>数量{{ item.quantityAvailable }}斤</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
.seckill_list {
  background-image: url('~/assets/images/jishibj.png');
  background-repeat: no-repeat;
  background-size: 100% 330px;
}
.wrapper_1200 {
  margin: 0 auto;
  width: 1200px;
}
.content {
  flex-wrap: wrap;
}
.item {
  width: calc(25% - 20px);
  position: relative;
  background-color: #fff;
  border-radius: 6px;
  margin: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  .image-container {
    width: 280px;
    height: 228px;
  }
  .el-image {
    width: 280px;
    height: 228px;
  }
  .image-container:deep .el-image__inner {
    display: block;
    width: 280px;
    height: 228px;
  }

  // 图片容器
  .image-container {
    position: relative;
    overflow: hidden;

    // 已售罄标签
    .sellOut {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: rgba(0, 0, 0, 0.6);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      z-index: 15;
    }
  }

  // 二维码遮罩层 - 覆盖整个item
  .qrcode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 20;
    border-radius: 6px;

    .qrcode-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .qrcode-image {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        background-color: #fff;
        padding: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

      .qrcode-text {
        font-weight: 500;
        text-align: center;
      }
    }
  }

  // 鼠标悬停时显示遮罩
  &:hover .qrcode-overlay {
    opacity: 1;
    visibility: visible;
  }

  .tags {
    padding: 8px 12px 0 12px;
    :deep .el-tag {
      margin-right: 8px;
    }
  }
  .peopleInfo {
    padding: 0 12px;
    .phone {
      color: #999;
    }
    .phone .iconfont {
      font-size: 12px !important;
    }
  }
  .fg {
    margin: 0 10px;
    color: #eaeaea;
  }
}
.item:hover {
  box-shadow: 10px 0 10px rgba(0, 0, 0, 0.1);
}
</style>